class Zoom{
    constructor(){
        this.$li = $("#small-img>li");
        this.$big_img = $("#big-img>#img");
        this.$big = $("#big-img");
        // 放大镜的大图
        this.$zoom_img = $("#zoom-img>img");
        this.$zoom = $("#zoom-img");
        // 滑块
        this.$float = $(".float_layer");
        // 遮罩层
        this.$mark = $(".mark");
        // 尺码
        this.$small = $(".small");
        this.$middle = $(".middle");
        this.$long = $(".long");
        this.$xlong = $(".xlong"); 
        // 加入购物车
        this.$add_cart = $("#add-cart");
        // 加号
        this.btn_top = $(".btn_top");
        // 减号
        this.btn_bot = $('.btn_bot');
        // 添加事件
        this.addEvent();
    } 
    addEvent(){
        let that = this;
        this.$li.each((index,value) => {
            $(value).hover(function(){
                $(this).css('border-color','black');
                // let src = $(this).find('img').attr('src');
                that.$big_img.attr('src',`../img/big${index + 1}.jpg`);
                that.$zoom_img.attr('src',`../img/zoom${index + 1}.jpg`);
            },function(){
                $(this).css('border-color','#eee');
            })
        })
        // 滑块 放大镜 显示 消失
        this.$big.hover(function(){
            that.$float.css('display','block');
            that.$zoom.css('display','block');
        },function(){
            that.$float.css('display','none');
            that.$zoom.css('display','none');
        });
        // 添加鼠标移动事件
        this.$mark.mousemove(function(e){
            let offsetX = e.pageX - $(this).offset().left;
            let offsetY = e.pageY - $(this).offset().top
            let left = offsetX - that.$float.width()/2;
            let top = offsetY - that.$float.height() /2;
            if(left<=0){
                left = 0;
            }else if(left >= $(this).width() - that.$float.width()){
                left = $(this).width() - that.$float.width();
            }
            if(top<=0){
                top = 0;
            }else if(top >= $(this).height() - that.$float.height()){
                top = $(this).height() - that.$float.height();
            }
            that.$float.css({
                left:left + 'px',
                top:top + 'px'
            });

            let x = left / ($(this).width() - that.$float.width());
            let y = top / ($(this).height() - that.$float.height());
            // console.log(x,y);

            that.$zoom_img.css('left',-(that.$zoom_img.width() - that.$zoom.width()) * x + 'px');
            that.$zoom_img.css('top',-(that.$zoom_img.height() - that.$zoom.height()) * y + 'px');
        });
        // 点击尺寸 添加边框
        this.$small.click(function(){
            $(this).css('borderColor','#000');
            that.$middle.css('borderColor','#ccc');
            that.$long.css('borderColor','#ccc');
            that.$xlong.css('borderColor','#ccc');
        });
        this.$middle.click(function(){
            $(this).css('borderColor','#000');
            that.$small.css('borderColor','#ccc');
            that.$long.css('borderColor','#ccc');
            that.$xlong.css('borderColor','#ccc');
        });
        this.$long.click(function(){
            $(this).css('borderColor','#000');
            that.$small.css('borderColor','#ccc');
            that.$middle.css('borderColor','#ccc');
            that.$xlong.css('borderColor','#ccc');
        });
        this.$xlong.click(function(){
            $(this).css('borderColor','#000');
            that.$small.css('borderColor','#ccc');
            that.$middle.css('borderColor','#ccc');
            that.$long.css('borderColor','#ccc');
        });
        // 添加获取表单的value值
        
        // 添加到购物车
        this.$add_cart.click(function(){
            
            let good_name = $(this).parent().parent().prev().prev().prev().prev().prev().prev().prev().html();
            // alert(good_name);
            let good_id = $(this).parent().parent().parent().attr('data-good-id');
            // alert(good_id);
            let good_src = $(this).parent().parent().parent().prev().select('div').eq(0).find('img').attr('src');
            // alert(good_src);
            let good_color = $(this).parent().parent().prev().prev().prev().find('span').eq(1).find('img').attr('alt');
            // alert(good_color);
            let good_size = $(this).parent().parent().prev().prev().find('a').eq(0).find('span').html();
            // alert(good_size);
            let good_price = $(this).parent().parent().prev().prev().prev().prev().prev().prev().find('span').eq(0).html();
            // alert(good_price);
            let good_num = $(this).parent().parent().prev().find('input').attr('value');


            // cookie
            let cookie_str = cookie.get('mallproducts') ? cookie.get('mallproducts') : '';
            let cookie_obj = cookie.convertStrToObj(cookie_str);
            console.log(cookie_obj);
            if(good_id in cookie_obj){
                cookie_obj[good_id].num ++;
            }else{
                cookie_obj[good_id] = {
                    "name" : good_name,
                    "price" : good_price,
                    "src" : good_src,
                    "color":good_color,
                    "size":good_size,
                    "num" : good_num
                }
            }
            cookie.set('mallproducts',JSON.stringify(cookie_obj),{expires:5,path:'/'});
            location.href = './cart.html';
        });
    }
}
new Zoom();